<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>试卷批改 - 教育AI助手</title>
    <link rel="stylesheet" href="/static/css/style.css">
    <style>
        .container {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        .form-group {
            margin-bottom: 20px;
        }
        .form-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        .form-control {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-sizing: border-box;
        }
        .btn {
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
        }
        .btn-primary {
            background-color: #4CAF50;
            color: white;
        }
        .btn-primary:hover {
            background-color: #45a049;
        }
        .preview-image {
            max-width: 100%;
            margin-top: 10px;
            display: none;
        }
        .error-message {
            color: red;
            margin-top: 5px;
            display: none;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>试卷批改</h1>
        <form id="examForm" th:action="@{/exam-submit}" method="post" enctype="multipart/form-data">
            <div class="form-group">
                <label for="grade">年级（可选）</label>
                <select id="grade" name="grade" class="form-control">
                    <option value="">请选择年级</option>
                    <option value="1">一年级</option>
                    <option value="2">二年级</option>
                    <option value="3">三年级</option>
                    <option value="4">四年级</option>
                    <option value="5">五年级</option>
                    <option value="6">六年级</option>
                    <option value="7">初一</option>
                    <option value="8">初二</option>
                    <option value="9">初三</option>
                    <option value="10">高一</option>
                    <option value="11">高二</option>
                    <option value="12">高三</option>
                </select>
            </div>

            <div class="form-group">
                <label for="subject">科目（可选）</label>
                <select id="subject" name="subject" class="form-control">
                    <option value="">请选择科目</option>
                    <option value="math">数学</option>
                    <option value="chinese">语文</option>
                    <option value="english">英语</option>
                    <option value="physics">物理</option>
                    <option value="chemistry">化学</option>
                    <option value="biology">生物</option>
                </select>
            </div>

            <div class="form-group">
                <label for="examImage">试卷图片（必填）</label>
                <input type="file" id="examImage" name="examImage" class="form-control" accept="image/*" required>
                <img id="imagePreview" class="preview-image">
                <div id="imageError" class="error-message"></div>
            </div>

            <div class="form-group">
                <label for="answerRequirements">答案要求（可选）</label>
                <textarea id="answerRequirements" name="answerRequirements" class="form-control" rows="4" 
                    placeholder="请输入答案要求，例如：请给出详细的解题步骤"></textarea>
            </div>

            <button type="submit" class="btn btn-primary">提交批改</button>
        </form>
    </div>

    <script>
        document.getElementById('examImage').addEventListener('change', function(e) {
            const file = e.target.files[0];
            const preview = document.getElementById('imagePreview');
            const error = document.getElementById('imageError');
            
            if (file) {
                if (file.size > 5 * 1024 * 1024) { // 5MB
                    error.textContent = '图片大小不能超过5MB';
                    error.style.display = 'block';
                    preview.style.display = 'none';
                    e.target.value = '';
                    return;
                }

                const reader = new FileReader();
                reader.onload = function(e) {
                    preview.src = e.target.result;
                    preview.style.display = 'block';
                    error.style.display = 'none';
                }
                reader.readAsDataURL(file);
            } else {
                preview.style.display = 'none';
            }
        });

        document.getElementById('examForm').addEventListener('submit', function(e) {
            const imageInput = document.getElementById('examImage');
            const error = document.getElementById('imageError');
            
            if (!imageInput.files[0]) {
                e.preventDefault();
                error.textContent = '请选择试卷图片';
                error.style.display = 'block';
            }
        });
    </script>
</body>
</html> 